

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='animation'><code class="symbol">animation</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animations to be used for opening/closing the popup. Setting to false will turn off the animation.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    animation: false
});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='close'><code class="symbol">close</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animation to be used for closing of the popup.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//combobox initialization
 &amp;lt;script&amp;gt;
     $("#combobox").kendoComboBox({
         dataSource: dataSource,
         animation: {
            close: {
                effects: "fadeOut",
                duration: 300,
                hide: true
                show: false
            }
         }
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='open'><code class="symbol">open</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animation to be used for opening of the popup.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//combobox initialization
 &amp;lt;script&amp;gt;
     $("#combobox").kendoComboBox({
         dataSource: dataSource,
         animation: {
            open: {
                effects: "fadeIn",
                duration: 300,
                show: true
            }
         }
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='autoBind'><code class="symbol">autoBind</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether to bind the widget to the DataSource on initialization.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    autoBind: false
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataSource'><code class="symbol">dataSource</code></a>: <span class="type">Object | kendo.data.DataSource</span></div><div class="detailBody"><div class="desc">A local JavaScript object or instance of DataSource or the data that the ComboBox will be bound to.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];
$("#comboBox").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: items
});</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "Get/Items" // url to remote data source (simple list of strings)
            }
        }
    });
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataTextField'><code class="symbol">dataTextField</code></a>: <span class="type">String</span><span class="defaultValue">(default: "")</span></div><div class="detailBody"><div class="desc"> Sets the field of the data item that provides the text content of the list items.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    dataTextField: "Name",
    dataValueField: "ID"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataValueField'><code class="symbol">dataValueField</code></a>: <span class="type">String</span><span class="defaultValue">(default: "")</span></div><div class="detailBody"><div class="desc"> Sets the field of the data item that provides the value content of the list items.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    dataTextField: "Name",
    dataValueField: "ID"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='delay'><code class="symbol">delay</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 200)</span></div><div class="detailBody"><div class="desc"> Specifies the delay in ms after which the ComboBox will start filtering dataSource.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    delay: 500
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='enable'><code class="symbol">enable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether the ComboBox should be initially enabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    enable: false
});</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// get a reference to the ComboBox widget
var comboBox = $("#comboBox").data("kendoComboBox");
comboBox.enable(false);</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='filter'><code class="symbol">filter</code></a>: <span class="type">String</span><span class="defaultValue">(default: "none")</span></div><div class="detailBody"><div class="desc"> Defines the type of filtration. If "none" the ComboBox will not filter the items.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    filter: "startswith"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='height'><code class="symbol">height</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 200)</span></div><div class="detailBody"><div class="desc"> Define the height of the drop-down list in pixels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    height: 500
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='highlightFirst'><code class="symbol">highlightFirst</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether the first item will be automatically highlighted.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    highLightFirst: true
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='ignoreCase'><code class="symbol">ignoreCase</code></a>: <span class="type">String</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Defines whether the filtration should be case sensitive.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#combobox").kendoComboBox({
    filter: 'contains',
    ignoreCase: false //now filtration will be case sensitive
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='index'><code class="symbol">index</code></a>: <span class="type">Number</span><span class="defaultValue">(default: -1)</span></div><div class="detailBody"><div class="desc"> Defines the initial selected item.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];
$("#comboBox").kendoComboBox({
    dataSource: items,
    index: 1 // 0 based from the start of the collection of objects. this selects "Item 2".
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minLength'><code class="symbol">minLength</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> Specifies the minimum characters that should be typed before the ComboBox activates</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    minLength: 3
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='placeholder'><code class="symbol">placeholder</code></a>: <span class="type">String</span><span class="defaultValue">(default: "")</span></div><div class="detailBody"><div class="desc"> A string that appears in the textbox when the combobox has no value.
 </div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//combobox initialization
 &lt;script&gt;
     $("#combobox").kendoComboBox({
         dataSource: dataSource,
         placeholder: "Select..."
     });
 &lt;/script&gt;</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>&lt;input id="combobox" placeholder="Select..." /&gt;

 //combobox initialization
 &lt;script&gt;
     $("#combobox").kendoComboBox({
         dataSource: dataSource
     });
 &lt;/script&gt;</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='suggest'><code class="symbol">suggest</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Controls whether the ComboBox should automatically auto-type the rest of text.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#comboBox").kendoComboBox({
    suggest: false
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">Function</span></div><div class="detailBody"><div class="desc">Template to be used for rendering the items in the list.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//template
&amp;lt;script id="template" type="text/x-kendo-tmpl"&amp;gt;
      # if (data.BoxArt.SmallUrl) { #
          &amp;lt;img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" /&amp;gt;Title:${ data.Name }, Year: ${ data.Name }
      # } else { #
          &amp;lt;img alt="${ data.Name }" /&amp;gt;Title:${ data.Name }, Year: ${ data.Name }
      # } #
 &amp;lt;/script&amp;gt;

 //combobox initialization
 &amp;lt;script&amp;gt;
     $("#combobox").kendoComboBox({
         dataSource: dataSource,
         dataTextField: "Name",
         dataValueField: "Id",
         template: kendo.template($("#template").html())
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div>

